<template>
	<van-popup v-model="show" round position="center" :close-on-click-overlay='false'>
		<div class="card-box">
			<div class="title">
				<h1>管理后台</h1>
			</div>
			<div class="input-box">
				<h1>{{ ciphertext || '请输入密码' }}</h1>
			</div>
			<van-number-keyboard theme="custom" extra-key="00" :show="true" close-button-text="确认" @input="onInput"
				@delete="onDelete" @close='submitData'>
			</van-number-keyboard>
			<Button type='danger block' @click="goBack">关闭</Button>
		</div>
	</van-popup>
</template>

<script>

export default {
	data() {
		return {
			show: false,
			form: {
				password: '',
			},
		}
	},
	computed: {
		//密文
		ciphertext() {
			let len = this.form.password.length;
			let text = '';
			for (let i = 0; i < len; i++) {
				text += '*'
			}
			return text
		},
	},
	methods: {
		goBack() {
			this.close();
		},
		open() {
			this.show = true;
		},
		close() {
			this.form.password = '';
			this.show = false;
		},
		onInput(e) {
			this.form.password += e;
		},
		onDelete(e) {
			this.form.password = this.form.password.substring(0, this.form.password.length - 1)
		},
		submitData() {
			if (this.form.password == '2023') {
				this.$emit('success')
				this.close();
			} else {
				this.$toast('密码错误')
			}

		},
	},
};
</script>

<style lang="less" scoped>
.card-box {
	width: 300px;
	.title {
		text-align: center;
		margin-bottom: 30px;

		h1 {
			font-size: 24px;
		}
	}

	.input-box {
		border: 1px solid rgb(196, 196, 196);
		border-radius: 20px;
		margin-bottom: 20px;
		height: 100px;
		padding: 0 20px;

		h1 {
			color: grey;
			font-size: 24px;
		}

		span {
			font-size: 24px;
		}
	}

	.shortcut-list {
		margin-bottom: 20px;
		margin-left: -20px;

		.item {
			border: 1px solid #fff;
			border-radius: 20px;
			color: #000;
			width: 171px;
			height: 70px;
			margin-left: 20px;
		}
	}

}

/deep/.van-number-keyboard {
	position: inherit;
	margin-bottom: 20px;
}
</style>